<template>
	<view >
		<view class="u-m-t-20 u-p-l-20 u-p-r-20" v-for="(item,index) in lists" :key="index">
			<view class="cflex-r u-p-r-30" :style="{backgroundColor:item.status==1? '#E2E2E2':item.params.isGuoQi==1?'#E2E2E2':item.tiaoJian<disPrice?'#FFDBDB':'rgba(255,219,219,0.5)'}" style="justify-content: space-between;height: 180rpx;border-radius: 16rpx;align-items: center;">
				<view class="cflex-r" style="justify-content: center;align-items: center;">
					<view class="cflex-c" style="width: 200rpx;align-items: center;justify-content: center;">
						<view class="cflex-r" style="align-items: center;justify-content: center;color: #FF5400;">
							<view class="u-font-12" style="margin-top: 10rpx;"  :style="{color:item.status==1?'#333333':item.params.isGuoQi==1?'#333333':'#FF5400'}">¥</view>
							<view class="u-m-l-5" style="font-size: 40rpx; font-weight: bold;"  :style="{color:item.status==1?'#333333':item.params.isGuoQi==1?'#333333':'#FF5400'}">{{item.price}}</view>
						</view>
						<view class="u-m-t-5" >
							<view class=" u-p-l-15 u-p-r-15 u-p-t-5 u-p-b-5" :style="{backgroundColor:item.status==1?'#F3F3F3':item.params.isGuoQi==1?'#F3F3F3':'#FEABAB',color:item.status==1?'#ADADAD':item.params.isGuoQi==1?'#ADADAD':'#FF5400'}" style="border-radius: 20rpx;font-size: 12rpx;">线上优惠券</view>
						</view>
						
					</view>
					
					<view class="cflex-c ">
						<!-- <view style="font-weight: bold;font-size: 32rpx;" :style="{color:item.status==1?'#333333':item.params.isGuoQi==1?'#333333':'#FF5400'}">
						 -->
						 <view style="font-weight: bold;font-size: 32rpx;" :style="{color:item.status==1?'#333333':item.params.isGuoQi==1?'#333333':'#FF5400'}">
							满{{item.tiaoJian}}可用
						</view>
						<view class="u-font-12 u-m-t-10" :style="{color:item.status==1?'#666666':item.params.isGuoQi==1?'#666666':'#FF5400'}">
							有效期至{{item.sxTime}}
						</view>
					</view>
				</view>
				<!-- status表示是否使用，1(使用)、0(未用)  isGuoQi表示是否过期 (1过期) 0(未过期)-->
				<view class=" u-p-l-20 u-p-r-20 u-p-t-5 u-p-b-5" 
				style="color:#FF5400 ;border: 1rpx solid #FF5400;border-radius: 30rpx;"
				@tap="useCoupou(index)">使用</view>
			</view>
		</view>
		<view  class="cflex-r-c u-font-16" style="position: fixed;bottom:0;height:120rpx;left:0;right:0;
		background-color:rgb(255,190,11);font-weight: bold;" 
		@tap="notUse()" v-show="lists.length!==0">
		不使用优惠券</view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				tabLists:[
					{text:"全部",isSelect:true},
					{text:"已使用",isSelect:false},
					{text:"已过期",isSelect:false}
				],
				current:0,
				status: [0,1,2],
				lists:[],
				disPrice:null, //表示传递过来的价格用于判断,
				option:null
			}
		},
		onShow() {
			this.youHui();
		},
		onLoad(opt) {
			if(opt.price){
				 //console.log("price",opt.price)
				this.disPrice = opt.price
			}
		},
		computed: {
			
		},
		methods: {
			useCoupou(index)//使用优惠券
			{
				let usePrice=this.disPrice-this.lists[index].price;
				if(this.disPrice<this.lists[index].tiaoJian || usePrice<0){
					uni.showToast({
					    title: '对不起，您的消费额不满足优惠券要求',
					    duration: 2000,
						mask:true,
						icon:'none'
					});
				}else{
					// // //console.log("else",this.disPrice<this.lists[index].tiaoJian || usePrice<0)
					uni.showToast({
					    title: '使用成功',
					    duration: 2000,
						mask:true,
						icon:'none'
					});
					uni.$emit("chooseCoupon",this.lists[index])
					uni.navigateBack({
						delta:1
					})
				}
			},
			notUse(){
				if(this.lists.length===0)//没有优惠券
				{
					uni.showModal({
						title:"暂无优惠券",
						content:"",
						showCancel:false,
						success(res) {
							if (res.confirm) {
								uni.$emit("chooseCoupon",false)
								uni.navigateBack({
									delta:1
								})
							}
						}
					})
				}
			},
			youHui(){
				let status = this.status[0];
				this.$request('kehu/order/getNotUseCoupon').then(res=>{
					this.lists = res.data;
					this.notUse()
				})
			},
			onTabClick(index){
				this.tabLists[this.current].isSelect = false;
				this.tabLists[index].isSelect = true;
				this.current = index;
				// 请求数据
				let status = this.status[index];
				 //console.log(status);
				this.$request('kehu/order/getNotUseCoupon').then(res=>{
					this.lists = res.data;
					this.notUse();
				})
			}
		}
	}
</script>

<style >
	page{
		background-color: #F6F7F8;
	}
</style>
